<template>
  <div class="border-line card">
    <header-title :title="totalPeople" @fullScreen="handleFullScreen"></header-title>
    <div @mouseenter="clearAutoPlay" @mouseleave="setAutoPlay">
      <echarts-view ref="echarts" class="card-content" :options="option" height="260px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import axios from 'axios'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0
    },
    isFullscren: {
      type: Boolean,
      default: false
    }
  },
  components: {
    headerTitle,
    echartsView
  },
  data () {
    return {
      autoPlayer: null,
      totalPeople: '',
      option: {}
    }
  },
  mounted () {
    this.fetchData()
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    }
  },
  methods: {
    fetchData () {
      axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_BZLXFX?RegionNo=${this.areaID}`).then((response) => {
        const xAxisData = []
        const baData = []
        const bssrlhData = []
        const dbData = []
        const dsrData = []
        const gycqData = []
        const qtData = []
        const zxbaData = []
        // const zbzhsData = []
        const { data: { DATA: res, Total } } = response
        this.totalPeople = `保障类型分析（全市保障总户数${Total}户）`
        res.forEach((i) => {
          const { simname, name, BA, BSSRLH, DB, DSR, GYCQ, QT, ZXBA } = i
          xAxisData.push(this.isFullscren && this.areaID !== 0 ? name : simname)
          baData.push(BA)
          bssrlhData.push(BSSRLH)
          dbData.push(DB)
          dsrData.push(DSR)
          gycqData.push(GYCQ)
          qtData.push(QT)
          zxbaData.push(ZXBA)
          // zbzhsData.push(ZBZHS)
        })
        const options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: 'rgb(22, 245, 255,.8)'
              }
            }
          },
          legend: {
            top: 0,
            left: 0,
            bottom: 10,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: 0,
            right: 0,
            top: 40,
            bottom: '3%',
            containLabel: true
          },
          yAxis: [
            {
              type: 'value',
              splitNumber: 4,
              axisTick: {
                // 刻度线
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine: {
                // 网格线
                show: false,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(127, 214, 255, 1)'
                }
              }
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: xAxisData,
              axisTick: {
                // 刻度线
                show: false
              },
              axisLabel: {
                color: '#fff'
              },
              axisLine: {
                // 坐标轴
                show: false
              },
              splitLine: {
                // 网格线
                show: false
              }
            }
          ],
          series: [
            {
              name: '备案',
              type: 'bar',
              data: baData,
              itemStyle: {
                color: '#FFC892',
                shadowColor: 'rgba(89,75,75,1)',
                shadowBlur: 4
              }
            },
            {
              name: '不审收入轮候',
              type: 'bar',
              data: bssrlhData,
              itemStyle: {
                color: '#3282DE',
                shadowColor: 'rgba(89,75,75,1)',
                shadowBlur: 4
              }
            },
            {
              name: '低保',
              type: 'bar',
              data: dbData,
              itemStyle: {
                color: '#F4593E',
                shadowColor: 'rgba(119,56,63,1)',
                shadowBlur: 4
              }
            },
            {
              name: '低收入',
              type: 'bar',
              data: dsrData,
              itemStyle: {
                color: '#564AF6',
                shadowColor: 'rgba(32,37,129,1)',
                shadowBlur: 4
              }
            },
            {
              name: '共有产权',
              type: 'bar',
              data: gycqData,
              itemStyle: {
                color: '#A4D41C',
                shadowColor: 'rgba(83,106,76,1)',
                shadowBlur: 4
              }
            },
            {
              name: '其他',
              type: 'bar',
              data: qtData,
              itemStyle: {
                color: '#45AFE1',
                shadowColor: 'rgba(49,115,142,1)',
                shadowBlur: 4
              }
            },
            {
              name: '自行备案',
              type: 'bar',
              data: zxbaData,
              itemStyle: {
                color: '#5E9FFD',
                shadowColor: 'rgba(35,67,126,1)',
                shadowBlur: 4
              }
            }
            // {
            //   name: '总保障户数',
            //   type: 'bar',
            //   data: zbzhsData,
            //   itemStyle: {
            //     color: '#834ED4',
            //     shadowColor: 'rgba(61,45,120,1)',
            //     shadowBlur: 4
            //   }
            // }
          ],
          dataZoom: [
            {
              xAxisIndex: 0, // 这里是从X轴的0刻度开始
              show: false, // 是否显示滑动条，不影响使用
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 4 // 一次性展示多少个。
            }
          ]
        }
        this.option = options
        this.$nextTick(() => {
          this.setAutoPlay()
        })
      })
    },
    setAutoPlay () {
      this.clearAutoPlay('setAutoPlay')
      this.autoPlayer = setInterval(() => {
        if (this.option.dataZoom[0].endValue === 7) {
          this.option.dataZoom[0].endValue = 4
          this.option.dataZoom[0].startValue = 0
        } else {
          this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1
          this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1
        }
      }, 3000)
    },
    clearAutoPlay () {
      if (!this.$isEmpty(this.autoPlayer)) {
        clearInterval(this.autoPlayer)
      }
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  &-content {
    margin-top: 10px;
  }
}
</style>
